<template>
  <el-dialog :title="title + '上传'" :visible.sync="uploadDialogShow" width="30%" center :before-close="close">
    <el-form ref="cuForm" :model="cuForm" :rules="rules" size="mini" v-loading="formLoading">
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="名称" prop="name">
            <el-col :span="20">
              <el-input style="width: 100%" v-model="cuForm.name"></el-input>
            </el-col>
          </el-form-item>
        </el-col>
        <!--        <el-col :span="12">-->
        <!--          <el-form-item label="编号" prop="num">-->
        <!--            <el-col :span="20">-->
        <!--              <el-input style="width: 100%" v-model="cuForm.num" readonly></el-input>-->
        <!--            </el-col>-->
        <!--          </el-form-item>-->
        <!--        </el-col>-->
      </el-row>
    </el-form>
    <div style="text-align: center;padding: 10px">
      <div style="width: 150px;margin: 10px auto;height: 28px">
        <el-button style="float:left" size="mini" @click="close">取 消</el-button>
        <el-upload style="float:left;margin-left: 10px" :action="upFileUrl" :headers="uploadHeaders"
                   :on-success="success" :show-file-list="false" :before-upload="beforeAvatarUpload"
                   :on-error="error" :disabled="uploadDisabled"
        >
          <el-tooltip v-if="uploadDisabled" class="item" effect="dark" content="请先输入文件信息" placement="top">
            <span>
               <el-button size="mini" type="primary" :disabled="uploadDisabled">上传{{title}}</el-button>
            </span>
          </el-tooltip>
          <el-button v-else size="mini" type="primary" :disabled="uploadDisabled">上传{{title}}</el-button>
        </el-upload>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { upFileUrl } from '@/api/others'
import { getToken } from '@/utils/auth'
import { generate_contract_num } from '@/api/contract'

export default {
  name: 'index.vue',
  props: {
    uploadDialogShow: {
      type: Boolean,
      default: false
    },
    type: {
      type: Number,
      default: 0
    }
  },
  created() {
    if (getToken()) {
      this.uploadHeaders['Authorization'] = getToken()
    }

    this.title = this.type == 1 ? '合同':'资料'

  },
  computed: {
    uploadDisabled() {
      return this.cuForm.name == null || this.cuForm.name === ''
    }
  },
  data() {
    return {
      title: '合同',
      cuForm: {
        name: null,
        url: null
      },
      rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ]
      },
      formLoading: false,
      uploadHeaders: {},
      upFileUrl,
      canUploadFileName: ['doc', 'xls', 'ppt', 'docx', 'xlsx', 'pptx', 'pdf'],
      loading: null
    }
  },
  methods: {
    success(response) {
      this.loading.close()
      this.cuForm.url = response.data
      let data = Object.assign({ type: this.type }, this.cuForm)
      this.$refs['cuForm'].resetFields()
      this.$message.success('上传成功')
      this.$emit('success', data)
    },
    beforeAvatarUpload(file) {
      let fileName = file.name.substring(file.name.lastIndexOf('.') + 1)
      let b = this.canUploadFileName.includes(fileName)
      if (!b) {
        this.$message.error('请上传Word、Excel、PPT、PDF等类型的文件')
      } else {
        this.loading = this.$loading({
          lock: true,
          text: '上传中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
      }
      return b
    },
    error() {
      this.loading.close()
      this.$message.error('上传出错，请重试')
    },
    close() {
      this.$refs['cuForm'].resetFields()
      this.$emit('close')
    },
    getContractNum() {
      this.formLoading = true
      generate_contract_num().then(res => {
        this.formLoading = false
        this.cuForm.num = res.message
      })
    }
  }
}
</script>

<style scoped>
</style>
